<template>
	<Modal :value="visible" :closable="false" footer-hide @on-visible-change="onChangeVisible" width="476"
		class-name="vertical-center-modal">
		<div class="">
			<div class="assign-cont" v-if="type=='改派'">
				<div class="assign-cont-top">
					<div class="assign-cont-top-name">
						{{title+type}}
					</div>
					<img src="../../../../assets/new/new_close.png" @click.stop="onClickCancel">
				</div>
				<!-- 指派 / 改派 -->
				<ul class="form-ul" style="padding: 8px 50px 0 25px;">
					<li class="form-ul-li half">
						<p class="li-title"><span class="li-must">*</span>指派：</p>
						<MyTreeSelect :value="assign" placeholder="指派对象" clearable :data="userTreeArr" search
							:disabled="automatic" @onSelectChange="onChangeAssign" style="flex: 1;">
						</MyTreeSelect>
					</li>
					<li class="form-ul-li half" v-if="type == '指派'">
						<!-- <p class="li-title"></p> -->
						<Checkbox label="automatic" v-model="automatic">自动指派</Checkbox>
					</li>
					<li class="form-ul-li half">
						<p class="li-title li-width"><span class="li-must">*</span>紧急程度：</p>
						<Select v-model="level" placeholder="紧急程度" @on-change="onChangeWorkOrderLevel">
							<Option v-for="item in levelArr" :value="item.casesetLevelId" :key="item.casesetLevelId">
								{{item.name}}
							</Option>
						</Select>
					</li>
					<li class="form-ul-li half">
						<p class="li-title"><span class="li-must">*</span>限时：</p>
						<Input v-model="time" placeholder="限时" readonly class="input-right-5"></Input>
						<span class="li-unit">分钟</span>
					</li>
					<li class="form-ul-li half">
						<p class="li-title" style="width: 79px;">抄送：</p>
						<MyTreeSelect :value="CC" placeholder="抄送人" clearable :data="userTreeArr" search checked
							@onCheckChange="onChangeCC" style="flex: 1;">
						</MyTreeSelect>
					</li>
					<li class="form-ul-li half" style="padding-left: 54px;">
						<!-- <p class="li-title"></p> -->
						<Checkbox class="form-ul-li-checkbox" v-model="sendSms">短信推送</Checkbox>
					</li>
					<!-- <li class="form-ul-li">
			  <p class="li-title">日期：</p>
			  <DatePicker :value='date'
			              type="date"
			              style="width: 100%"
			              @on-change="onChangeDate"></DatePicker>
			</li> -->
					<li class="form-ul-li" style="margin-left: 2px;align-items: initial;">
						<p class="li-title" style="width: 94px;padding-top: 4px;">分派备注：</p>
						<Input v-model="remark" maxlength="-1" :rows="3" type="textarea" placeholder="分派备注" />
					</li>
				</ul>
				<div class="assign-cont-btn">
					<Button class="assign-cont-btn-left" @click.stop="onClickCancel">取消</Button>
					<Button class="assign-cont-btn-right" type="primary" :loading="loading" @click.stop="onClickConfirm">确定</Button>
				</div>
			</div>
			<div class="assign-cont assign-type" v-else-if="type=='指派'">
				<div class="assign-cont-top">
					<div class="assign-cont-top-name">
						{{title+type}}
					</div>
					<img src="../../../../assets/new/new_close.png" @click.stop="onClickCancel">
				</div>
				<!-- 指派 / 改派 -->
				<ul class="form-ul">
					<li class="form-ul-li half">
						<p class="li-title"><span class="li-must">*</span>指派：</p>
						<MyTreeSelect :value="assign" placeholder="指派对象" clearable :data="userTreeArr" search
							:disabled="automatic" @onSelectChange="onChangeAssign" style="flex: 1;">
						</MyTreeSelect>
					</li>
					<li class="form-ul-li half" v-if="type == '指派'" style="padding-left: 15px;">
						<!-- <p class="li-title"></p> -->
						<Checkbox label="automatic" v-model="automatic">自动指派</Checkbox>
					</li>
					<li class="form-ul-li half">
						<p class="li-title li-width"><span class="li-must">*</span>紧急程度：</p>
						<Select v-model="level" placeholder="紧急程度" @on-change="onChangeWorkOrderLevel">
							<Option v-for="item in levelArr" :value="item.casesetLevelId" :key="item.casesetLevelId">
								{{item.name}}
							</Option>
						</Select>
					</li>
					<li class="form-ul-li half">
						<p class="li-title" style="width: 50px;"><span class="li-must">*</span>限时：</p>
						<Input v-model="time" placeholder="限时" readonly class="input-right-5"></Input>
						<span class="li-unit">分钟</span>
					</li>
					<li class="form-ul-li half">
						<p class="li-title">抄送：</p>
						<MyTreeSelect :value="CC" placeholder="抄送人" clearable :data="userTreeArr" search checked
							@onCheckChange="onChangeCC" style="flex: 1;">
						</MyTreeSelect>
					</li>
					<li class="form-ul-li half" style="padding-left: 15px;">
						<!-- <p class="li-title"></p> -->
						<Checkbox class="form-ul-li-checkbox" v-model="sendSms">短信推送</Checkbox>
					</li>
					<!-- <li class="form-ul-li">
			  <p class="li-title">日期：</p>
			  <DatePicker :value='date'
			              type="date"
			              style="width: 100%"
			              @on-change="onChangeDate"></DatePicker>
			</li> -->
					<li class="form-ul-li" style="margin-left: 2px;align-items: initial;">
						<p class="li-title" style="width: 94px;padding-top: 4px;">分派备注：</p>
						<Input v-model="remark" maxlength="-1" :rows="3" type="textarea" placeholder="分派备注" />
					</li>
				</ul>
				<div class="assign-cont-btn">
					<Button class="assign-cont-btn-left" @click.stop="onClickCancel">取消</Button>
					<Button class="assign-cont-btn-right" type="primary" :loading="loading" @click.stop="onClickConfirm">确定</Button>
				</div>
			</div>
		</div>
	</Modal>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import MyTreeSelect from '../../../common/MyTreeSelect'
	export default {
		components: {
			MyTreeSelect
		},
		model: {
			prop: 'visible',
			event: 'onChange'
		},
		props: {
			title: {
				type: String,
				default: '问题'
			},
			visible: Boolean,
			type: String,
			item: null,
			lnglat: Object
		},
		data() {
			return {
				loading: false,
				assignId: '',
				assign: '', //指派
				automatic: false, // 自动指派
				level: '', //紧急程度
				time: '', //限时
				CCId: '',
				CC: '', //抄送
				sendSms: false, //短信推送
				// date: '',
				remark: '', //分派备注
			}
		},
		watch: {
			item(newVal) {
				if (newVal) {
					let newKeyMap = this.$swapKeyValue(this.$store.state.patrolMaintain.patrolCaseKeyMap)
					let newData = this.$keyMapNew(newVal, newKeyMap)
					for (const i in newData) {
						this[i] = newData[i]
					}
					this.sendSms = newData.sendSms == 1
				}
			},
		},
		computed: {
			...mapGetters({
				'levelArr': 'getWorkOrderLevelAllList',
				'userTreeArr': 'getUserTreeList',
			}),
		},
		mounted() {
			this.init()
		},
		methods: {
			...mapActions([
				'updateWorkOrderLevelAllList',
				'updateUserTreeList'
			]),
			init() {
				// patrolCase已调用，防重复调用
				// this.updateWorkOrderLevelAllList()
				// this.updateUserTreeList()
			},
			// 修改指派对象
			onChangeAssign(data) {
				if (data.type === 'user') {
					this.assignId = data.id
					this.assign = data.name
				}
			},
			onChangeWorkOrderLevel(i) {
				if (i) {
					this.time = this.levelArr[i - 1].time;
				}
			},
			// 修改抄送人
			onChangeCC(section) {
				let idArr = []
				let valueArr = []
				section.forEach(item => {
					if (item.type === 'user') {
						idArr.push(item.id)
						valueArr.push(item.name)
					}
				})
				this.CCId = idArr.join()
				this.CC = valueArr.join()
			},
			// 选择日期
			onChangeDate(date) {
				this.date = date
			},
			// 确定按钮
			onClickConfirm() {
				if (!this.automatic) {
					if (!this.assignId) return this.$Message.info('请选择指派人')
				}
				if (!this.level) return this.$Message.info('请选择紧急程度')
				if (!this.time) return this.$Message.info('请输入限时分钟')
				if (this.automatic) {
					// 自动指派时调用自动指派的接口
					this.$http.automaticAssignPatrolCase(this.lnglat).then(res => {
						let data = res.result
						if (!data.value) {
							this.automatic = false
							this.$Message.info('暂无指派人可用')
						} else {
							this.assignId = data.value
							this.assign = data.name
							this.assignPatrolCase()
						}
					})
				} else {
					this.assignPatrolCase()
				}
			},
			assignPatrolCase() {
				let params = {
					id: this.id,
					assignId: this.assignId,
					level: this.level,
					time: this.time,
					CCId: this.CCId,
					sendSms: this.sendSms ? 1 : 0,
					remark: this.remark
				}
				this.loading = true
				if (this.type === '指派') {
					this.$store.dispatch('assignPatrolCase', params).then(res => {
						this.loading = false
						this.$emit('onClickConfirm')
						this.$emit('onChange', false)
					}).catch(err => {
						this.loading = false
					})
				} else {
					this.$store.dispatch('reassignmentPatrolCase', params).then(res => {
						this.loading = false
						this.$emit('onClickConfirm')
						this.$emit('onChange', false)
					}).catch(err => {
						this.loading = false
					})
				}
			},
			onClickCancel() {
				this.$emit('onClickCancel')
				this.$emit('onChange', false)
			},
			onChangeVisible(boo) {
				if (!boo) {
					this.$emit('onChange', false)
					this.$emit('update:item', '')
					this.$emit('update:lnglat', {})
					this.resetData()
				}
			},
			resetData() {
				this.assignId = ''
				this.assign = ''
				this.level = ''
				this.time = ''
				this.CCId = ''
				this.CC = ''
				this.sendSms = false
				// this.date = ''
				this.remark = ''
				this.automatic = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-minheight {
		height: 300px;
	}

	.form-ul {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 50px 0 50px;
		.form-ul-li{
			font-size: 14px;
			color:#CCCCCC;
			font-weight: bold;
			display: flex;
			align-items: center;
			margin-top: 12px;
			.li-title{
				width: 77px;
				text-align: right;
				span{
					color: #FF3333;
				}
			}
			.li-width{
				width: 130px;
			}
		}
		li {
			width: 100%;
		}

		.half {
			width: 48%;
			margin-right: 2%;
		}
	}

	.assign-cont {
		width: 476px;
		height: 385px;
		background: url(../../../../assets/new/new_form_578.png) 0 0 no-repeat;
		background-size: 100% 100%;

		.assign-cont-top {
			font-size: 16px;
			color: #FFFFFF;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 35px 54px 0;

			.assign-cont-top-name {
				height: 47px;
				line-height: 47px;
			}

			img {
				width: 18px;
				height: 18px;
				cursor: pointer;
			}
		}
		.assign-cont-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 32px;
			.assign-cont-btn-left{
				width: 60px;
				height: 34px;
				font-size: 16px;
				color: #333333;
				background-color: #FFFFFF;
				font-weight: bold;
				border-radius: 6px;
				border: none;
				line-height: 34px;
				text-align: center;
				margin-right: 60px;
			}
			.assign-cont-btn-right{
				width: 60px;
				height: 34px;
				font-size: 16px;
				color: #FFFFFF;
				background-color: #0D9DFF;
				border: none;
				font-weight: bold;
				border-radius: 6px;
				line-height: 34px;
				text-align: center;
			}
		}
	}
	.assign-type{
		.form-ul-li{
			margin-top: 12px;
		}
	}

	::v-deep {
		.ivu-modal-body {
			padding: 0;
		}
		.ivu-input{
			height: 30px;
			font-size: 14px !important;
			background-color: #747474 !important;
			border-radius: 4px;
		}
		.ivu-select-selection{
			height: 30px;
			.ivu-select-selected-value{
				height: 30px;
				font-size: 14px !important;
				line-height: 30px;
				background-color: #747474 !important;
				border-radius: 4px;
			}
		}
		.ivu-select-item-selected{
			background-color: #FFFFFF;
		}
		textarea{
			height: 46px !important;
			font-size: 14px !important;
		}
		.txt-text{
			height: 56px !important;
		}
		.ivu-checkbox{
			margin-right: 6px;
		}
		.ivu-input-with-suffix {
		    height: 32px;
		}
		.treeSelect-tree{
			.icon-gongsi{
				color: #0D9DFF !important;
			}
			.icon-jiaose{
				color: #0D9DFF !important;
			}
		}
		.treeSelect-bottom{
			.ivu-btn-primary {
			    background-color: #0D9DFF;
			    border-color: #0D9DFF;
			}
		}
		.ivu-input:focus {
		    border-color: #57a3f3;
		    outline: 0;
		    box-shadow: 0 0 0 2px rgba(45,140,240,.2);
		}
		.treeSelect .treeSelect-dropdown .treeSelect-bottom {
		    border-top: 1px solid rgba(45,140,240,.5);
		}
	}
</style>
